<template>
  <div class="robot-container">
    <img
      src="https://img.zcool.cn/community/01108d5b052508a801218cf4d1bb12.png@3000w_1l_2o_100sh.png"
      alt=""
      class="avatar"
    />
    <mavon-editor
      v-if="md"
      v-model="md"
      :codeStyle="setting.codeStyle"
      :defaultOpen="setting.defaultOpen"
      :editable="setting.editable"
      :previewBackground="setting.previewBackground"
      :scrollStyle="setting.scrollStyle"
      :subfield="false"
      :toolbarsFlag="setting.toolbarsFlag"
      class="mavon-editor"
    />
    <div v-else class="robot-loading">
      <div class="bounce">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { watchEffect, ref, Ref } from "vue";

const md: Ref<string> = ref("");

const props = defineProps<{
  content: string;
}>();
// 监听content的变化
watchEffect(() => {
  // 在这里执行相应的操作，比如更新组件的渲染内容等
  md.value = props.content;
});
const setting = {
  subfield: false, // 单双栏模式
  defaultOpen: "preview", //edit： 默认展示编辑区域 ， preview： 默认展示预览区域
  editable: false,
  toolbarsFlag: false,
  scrollStyle: true,
  previewBackground: "#ffffff",
  codeStyle: "androidstudio",
};
</script>
<style lang="scss" scoped>
:deep(.markdown-body) {
  font-size: 12px;
}

.robot-container {
  margin: 10px;
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  color: black;

  .avatar {
    border-radius: 6px;
    width: 30px;
    height: 30px;
    object-fit: cover;
    margin-right: 10px;
    margin-top: 5px;
  }

  .robot-loading {
    background: #ffffff;
    border-radius: 8px;
    width: 80px;
    height: 38px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
    position: relative;
  }
}

.v-note-wrapper {
  min-height: auto;
  border-radius: 8px !important;
  z-index: 900;
}

:deep(.v-note-show) {
  border-radius: 8px !important;
}

:deep(.hljs) {
  padding: 5px;
}

.mavon-editor {
  margin: 5px;
}

:deep(p) {
  margin-bottom: 0 !important;
}

:deep(
    .v-note-wrapper .v-note-panel .v-note-show .v-show-content,
    .v-note-wrapper .v-note-panel .v-note-show .v-show-content-html
  ) {
  padding: 13px 10px !important;
}

/*  begin bounce css */

.bounce {
  width: 70px;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -40%);
}

.bounce > div {
  width: 18px;
  height: 18px;
  background-color: #efbbe8;
  border-radius: 100%;
  display: inline-block;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  margin-right: 2px;
}

.bounce .bounce1 {
  animation-delay: -0.32s;
}

.bounce .bounce2 {
  animation-delay: -0.16s;
}

@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
</style>
